<template>
   <div class="page-container">
    <section><el-button @click="getWebSocketKey">开始websocket连接</el-button></section>

    <section>
      <span>向websocket中发送的数据信息：</span>
      <el-input v-model="info"></el-input>
      <el-button @click="sedDataToWebSocket">向websocket中发送数据</el-button>
    </section>

    <section>
      <span>接收到的websocket数据：</span>
      <div>{{websocketBackInfo || ''}}</div>
    </section>

    <websocket v-if="showWebSocket" :socketKey="socketKey" :params="websocketParams" :apiInfo="apiInfo" @websocketSuccess="websocketSuccess"></websocket>
   </div>
</template>

<script>
import API from '@/api/webSocket'

export default {
components: {
    websocket: () => import('@/views/webSocket/modules/webSocket.vue') // 引入wwebsocket
},
 data() {
   return {
    showWebSocket: true,
    socketKey: 'e076c67b4c00d608e8402acb6eb8efaff9076235',
    apiInfo: '/ws/api/helmet/realTimeData', // websocket调用看接口
    // projectId: '',
    websocketParams: {}, // websocket参数
    info: '',
    websocketBackInfo: ''
   }
 },
 computed: {},
 mounted() {

 },
 //方法集合
 methods: {
   // websocket连接
   getWebSocketKey () {
      API.getWebSocketKey().then(res => {
         this.socketKey = res.result || ''
         this.showWebSocket = true
      }).catch(e => {
        this.$message.error(`error:${e.message}`)
      }).finally(() => {

      })
    },
    // 获取 websocket推送的数据
    websocketSuccess(data) {
      this.websocketBackInfo = data
    //   if (data.dataType === 'realTimeData') {
    //     // debugger
    //     // 清空之前的数据
    //     this.list &&
    //       this.list.forEach((item) => {
    //         this.map && this.map.removeOverlay(this.map.getOverlayById(item.sn))
    //       })
    //     // this.map.getOverlays().clear()

    //     this.list = (data && data.data && Array.isArray(data.data) && data.data) || []
    //     this.addPeople()
    //     console.log('返回心跳', data)
    //   }
    //   this.$emit('changeData', data)
    },
    // 向websocket中发送数据
    sedDataToWebSocket(){
      API.sedDataToWebSocket({infoData: this.info}).then(res => {
         // this.socketKey = res || ''
        //  this.showWebSocket = true
      }).catch(e => {
        this.$message.error(`error:${e.message}`)
      }).finally(() => {

      })
    }
 }
}
</script>

<style lang='less' scoped>
</style>